<template >
	<view :style="bj"  class="login-bj">
		<view class="login-img">
			<!-- <view class="owl-login"  :class="hideEyes?'password':''">
				<view class="hand"></view>
				<view class="hand hand-r"></view>
				<view class="arms">
					<view class="arm"></view>
					<view class="arm arm-r"></view>
				</view>
			</view> -->
		</view>
		<view class="login-form">
			<form @submit="formSubmit" @reset="formReset">
				<!-- 	<span @click="versionclick" :style="serverconfig1" class="version">当前版本:{{this.version}}</span> -->
					
				<view class="form-input">
					<input type="text"  :style="xhx" @input="removePws" class="input1" :value="form.username" id="editor" name="username" placeholder="账号" @focus="passwordF_B" @blur="passwordF_B"  />
			<view style="float: right;margin-bottom: 20px;">
								<checkbox-group  @change="checkboxChange">
				                <checkbox
				                    type="checkbox"
				                    :checked="rememberPsw" >
				           <!-- :color="color" -->
				                 <text  :style="fontcolor">保存用户</text>
				                </checkbox>
				            </checkbox-group>
				</view>
				</view>
				<view  class="form-input">
					<input type="password" :style="xhx" :value="form.password" class="input2"  id="editor" name="password" placeholder="密码" @focus="passwordF_B" @blur="passwordF_B" />
				</view>
				<button :style="chonzhi"  class="wrapper" type="default" form-type="reset">
				重&nbsp;&nbsp;置
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				</button>
				<button :style="denglu"  class="wrapper" type="primary"  form-type="submit">
					登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</button>
				<view class="serverconfig" >
				</view>
				<view class="reg text-center">
				  <text style="color: black;" class="text-grey1">没有账号？</text>
				  <text @click="handleUserRegister" style="color:#46A3FF" class="text-white">立即注册</text>
				</view>
			</form>
			<!-- <view class="serverconfig1" :style="serverconfig1"  @click="CreateCode">软件分享
			<Am-FontAwesome type="fas fa-barcode"  fw color=color></Am-FontAwesome>
			</view> -->
		</view>
	</view>
</template>
<script>
	import jpSelect from '../../components/jp-select/jp-select.vue';
	import maskModel from '../../components/mask-model/mask-model.vue'
	import { encryptDes, decryptDes  } from '@/common/des.js' 
	import Prompt from '../../components/zz-prompt/index.vue';
    import AmFontAwesome from '../../components/Am-FontAwesome/index.vue';
	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue'
	import UserApi from '@/api/user.js'
	import { setToken, getToken, setUser, getUser } from '@/utils/auth'
	import { mapMutations } from 'vuex';

	export default {
		components: {
			 Prompt,
		     maskModel,
			 AmFontAwesome,
			 jpSelect,
			  tColorPicker
		},
		data() {
			return {
				color1: {r: 121,g: 85,b: 72,a: 1},
				show:true,
				//滚动显示区域宽度
				width:'375px',
				//滚动显示区域高度，大于等于40
				height:'40px',
				//滚动显示区域背景颜色
				background:'',
				//滚动显示字幕颜色
				color:this.$kdup.color,
				list: [],//用户列表
				type:"password",
				flag:false,
				rememberPsw:false,
				version:getApp().globalData.config.appInfo.version,//系统当前版本号V2.0.5
				form: {
					username: "",
					password: ""
				},
				url:"",
				hideEyes: false,
				urlpage:"",
				maskTitle:'',//更新内容提示
				//样式大全
				serverconfig1:{
					color:this.$kdup.color,
					borderBottom:'1px dashed '+this.$kdup.color
				},
				denglu:{
					backgroundColor:'#007BFF',
					width:'60%',
					height:'50px',
					color:'#FFFFFF',
					float:'right',
					fontWeight:'1000',
					borderRadius:'20px'
				},
				chonzhi:{
					backgroundColor:' #007BFF',
					width: '30%',
					color:'#FFFFFF',
					MarginLeft:'10px',
					fontWeight:'1000',
				    borderRadius:'20px'
				},
				xhx:{
					border:' 1px solid black',
				},
				fontcolor:{
					//color:'#8E8E8E',
					
				},
				bj:{
					backgroundColor:this.$kdup.color,
					height:'100%',
					MarginTop:'-10rpx',
					width:'100%',
					position:'absolute'
				},
			}
		},
		onLoad(e){ 
			if(this.$kdup.isEmpty(uni.getStorageSync("color"))){
				uni.setStorageSync("color","#ffffff")
				// #ifdef H5 
				  uni.navigateBack();
				// #endif
				// #ifdef APP-PLUS 
				  plus.runtime.restart();
				// #endif
			}
			uni.setNavigationBarColor({
				frontColor: "#ffffff",	//文字颜色
				backgroundColor: this.$kdup.color	//底部背景色
			})
			if(e.hasOwnProperty("urlpage"))
		    this.urlpage = e.urlpage;
			if(this.$kdup.isEmpty(uni.getStorageSync("rememberPsw"))){
				this.rememberPsw=false;
			}else{
				if(uni.getStorageSync("rememberPsw")==false){
					this.rememberPsw=false;
				}else{
				     this.rememberPsw=true;//解密
					 if(!this.$kdup.isEmpty(uni.getStorageSync("password"))){
						this.form.password=uni.getStorageSync("password"); 
					 }
				}
			}
			this.form.password=uni.getStorageSync("password"); 
			this.form.username=uni.getStorageSync("username");
			 const userInfo = uni.getStorageSync("userInfo");
			 console.log('userInfo:', userInfo)
			 if(getToken()){
				this.$tab.redirectTo(`/pages/index/index`)
			 }
		},
		mounted() {
			//检查更新
				uni.getSystemInfo({  
					success:(res) => {  
						//检测当前平台，如果是安卓则启动安卓更新  
					    if(res.platform=="android"){ 
							//赋值旧版本号
						}  
					}  
			  }) 
		},
		methods: {
			...mapMutations('taskStore',['setUserInfo']),
			handleUserRegister(){
				  this.$tab.redirectTo(`/pages/register/register`)
			},
			//生成二维码
			CreateCode(){
				var _url;
				if(this.$kdup.isEmpty(uni.getStorageSync("kdup_url"))){
				uni.setStorageSync("kdup_url",this.url)
				}
				_url=uni.getStorageSync("kdup_url");
				if(this.$kdup.isEmpty(_url)){
					uni.showToast({
						icon: 'none',
						title: '请先配置服务地址！',
						duration: 3000
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/createcode/createcode?version='+this.version
				});
			},
			//点击版本号
			versionclick:function(){
			},
			checkboxChange:function(){
			this.rememberPsw=!this.rememberPsw;
			}, 
			passwordF_B() {
				this.hideEyes = !this.hideEyes;
			},
			//登录按钮点击
			formSubmit(e) {
				console.log('e', e)
				//登录验证
				if (this.$kdup.isEmpty(e.detail.value.username.trim()) || this.$kdup.isEmpty(e.detail.value.password.trim())) {
					uni.showToast({
						title: "请先输入账号和密码!",
						icon: "none",
						duration: 3000
					});
					return;
				} 
				var paw=e.detail.value.password.trim();
				var data = {userName:e.detail.value.username.trim(),
					pwd:paw};
				uni.showLoading({title: '登录中',mask:true});
				UserApi.login(data).then(res => {
					 setTimeout(function () {uni.hideLoading();}, 100);
					if(!res.data?.data){
						uni.showToast({
							title: res.data.msg,
							duration: 3000,
							icon: "none"
						}); 
						this.form.password="";
						return;
					}
					uni.setStorageSync("username", e.detail.value.username.trim());
					uni.setStorageSync("rememberPsw", this.rememberPsw);
					if(this.rememberPsw){             
						uni.setStorageSync("password",paw);
					}else{
						uni.removeStorageSync("password");
					}
					 this.$kdup.userInfo = res.data.data.user;
					 console.log('this.$kdup.userInfo):', this.$kdup.userInfo)
					// uni.setStorageSync("userInfo",this.$kdup.userInfo);
					 setUser(this.$kdup.userInfo)
					 setToken(this.$kdup.userInfo.token)
					 this.setUserInfo(this.$kdup.userInfo)
					 
					 // reLaunch
					 uni.reLaunch({
					 	url:'/pages/index/index'
					 }); 
					uni.showToast({
						title: "登录成功",
						icon: "none",duration: 3000
					}); 
			 }); 
			},
			//清空表单
			formReset: function(e) {
				// console.log('清空数据')
			},
			//当用户名没有值的时候清空密码
			removePws:function(e){
				if(this.isEmpty(e.detail.value)){
					this.form={
					username: "",
					password: ""
				}
				}
			},
			/*
			 *判断非空
			 *
			*/
			 isEmpty:function(val){
			    if(val == null)return true;
			    if(val == undefined || val == 'undefined') return true;
			    if(val == "") return true;
			    if(val.length == 0) return true;
			    if(!/[^(^\s*)|(\s*$)]/.test(val)) return true;
			    return false;
			}
		}
	}
</script>
<style lang="scss" >
		.reg {
		  margin-top: 15px;
		}
		page {
		  background-color: #ffffff;
		}
		
	   .login-bj{
			 background-image: url('/static/img/logo.jpg'); /* 设置背景图片路径 */
			  background-size: 100% 100%; /* 背景图片完全覆盖元素区域 */
		}
	  .input1 {
            //text-indent:25px;
			//background: url('')no-repeat;
	        background-position:left;
			border-radius: 20px;
	        }
	  .input2 {
	      //text-indent:25px;
	      //background: #fff url('') no-repeat;
	      background-position:left;
	      }

	uni-modal .uni-modal__bd{   
	    white-space: pre-wrap;  
	}
	#editor{
	width: 100%;
	height: 55px;
	border-radius: 20px;
	}
	button{
		display: inline-block;
	}
	.switch{
     float:left;
	 position: relative;
	 z-index: 1;
	 }
	.version1{
	position: relative;
	left: 15%;
	}
	.serverconfig {
		margin-top: 30px;
		width: 102px;
	}
	.serverconfig1 {
		margin-top: -25px;
		float: right;
		width: 85px;
	}
	.serverconfig2 {
		color: #555500;
		float: left;
		margin-top: 30px;
		border-bottom: 1px dashed    #555500;
	}
	.login-form {
		//background-color:#E0E0E0; /* 白色背景，半透明 */
		margin: -9px 20px 0 20px;
		height: 300px;
		border-radius:20px;
		//box-shadow: 0 20px 700px #E0E0E0;
		padding: 40px;
	}
	.form-input input {
		/* background: #ffffff; */
		height: 40px;
		margin: 20px 0;
		padding: 0 10px;
	}
	.login-img {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 110px;
		margin-top: 300rpx;
	}
	.owl-login {
		width: 211px;
		height: 108px;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		position: absolute;
	}
	.owl-login .hand {
		width: 34px;
		height: 34px;
		-webkit-border-radius: 40px;
		border-radius: 40px;
		background-color: #472d20;
		transform: scaleY(0.6);
		transition: 0.3s ease-out;
		position: absolute;
		left: 14px;
		bottom: -8px;
	}
	.owl-login .hand.hand-r {
		left: 170px;
	}
	.owl-login .arms {
		top: 58px;
		position: absolute;
		width: 100%;
		height: 41px;
		overflow: hidden;
	}
	.owl-login .arms .arm {
		width: 40px;
		height: 65px;
		position: absolute;
		left: 20px;
		top: 40px;
		background-image: url("");
		background-size: 100%;
		transition: 0.3s ease-out;
		transform: rotate(-20deg);
	}
	.owl-login .arms .arm.arm-r {
		transform: rotate(20deg) scaleX(-1);
		left: 158px;
	}
	.owl-login.password .hand {
		transform: translateX(42px) translateY(-15px) scale(0.7);
	}
	.owl-login.password .hand.hand-r {
		transform: translateX(-42px) translateY(-15px) scale(0.7);
	}
	.owl-login.password .arms .arm {
		transform: translateY(-40px) translateX(40px);
	}
	.owl-login.password .arms .arm.arm-r {
		transform: translateY(-40px) translateX(-40px) scaleX(-1);
	}
  /*按钮特效*/
  .wrapper{
	   font-size: 20px;
  }
     .wrapper span{
         position: absolute;
         display: block;
     }
     .wrapper span:nth-child(1){
         height: 5px;
         width:200px;
         top:0px;
         left:-200px;
         background: linear-gradient(to right, rgba(0,0,0,0), #aaffff);
         border-top-right-radius: 1px;
         border-bottom-right-radius: 1px;
         animation: span1 2s linear infinite;
         animation-delay: 1s;
     }
	 button span:nth-child(1){
	     height: 5px;
	     width:200px;
	     top:0px;
	     left:-200px;
	     background: linear-gradient(to right, rgba(0,0,0,0), #aaffff);
	     border-top-right-radius: 1px;
	     border-bottom-right-radius: 1px;
	     animation: span1 2s linear infinite;
	     animation-delay: 1s;
	 }
	 @keyframes span1{
	     0%{
	         left:-200px
	     }
	     100%{
	         left:200px;
	     }
	 }
	 button span:nth-child(2){
	     height: 70px;
	     width: 5px;
	     top:-70px;
	     right:0px;
	     background: linear-gradient(to bottom, rgba(0,0,0,0), #aaffff);
	     border-bottom-left-radius: 1px;
	     border-bottom-right-radius: 1px;
	     animation: span2 2s linear infinite;
	     animation-delay: 2s;
	 }
	 @keyframes span2{
	     0%{
	         top:-70px;
	     }
	     100%{
	         top:70px;
	     }
	 }
	 button span:nth-child(3){
	     height:5px;
	     width:200px;
	     right:-200px;
	     bottom: 0px;
	     background: linear-gradient(to left, rgba(0,0,0,0), #aaffff);
	     border-top-left-radius: 1px;
	     border-bottom-left-radius: 1px;
	     animation: span3 2s linear infinite;
	     animation-delay: 3s;
	 }
	 @keyframes span3{
	     0%{
	         right:-200px;
	     }
	     100%{
	         right: 200px;
	     }
	 }
	 button span:nth-child(4){
	     height:70px;
	     width:5px;
	     bottom:-70px;
	     left:0px;
	     background: linear-gradient(to top, rgba(0,0,0,0), #aaffff);
	     border-top-right-radius: 1px;
	     border-top-left-radius: 1px;
	     animation: span4 2s linear infinite;
	     animation-delay: 4s;
	 }
	 @keyframes span4{
	     0%{
	         bottom: -70px;
	     }
	     100%{
	         bottom:70px;
	     }
	 }
	 button:hover{
	     transition: all .5s;
	     box-shadow: 0px 3px 10px rgba(0,0,0,.4);
	 }
	 button:hover span{
	     animation-play-state: paused;
	 }
</style>
